'use client';

import Avatar from '@/asset/avatar.png';
import { authClient } from '@/lib/auth-client';
import trpc from '@/lib/trpc/client';
import Image from 'next/image';
import Link from 'next/link';
import QueryImage from '../common/query-image';
import SignOut from '../common/sign-out';
import UserInfo from '../common/user-info';
import { Button } from '../ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '../ui/dropdown-menu';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '../ui/sidebar';

const items = [
  {
    title: '商铺信息',
    url: 'info',
  },
  {
    title: '外卖管理',
    url: 'product',
  },
  {
    title: '订单管理',
    url: 'order',
  },
  {
    title: '消息管理',
    url: 'message',
  },
];

export default function ShopSidebar() {
  const { data: session } = authClient.useSession();

  return (
    <Sidebar>
      <SidebarHeader className="border-b text-foreground bg-background">
        <div className="flex justify-between items-center px-3 py-2">
          <div className="font-bold">Rin外卖 商铺端</div>
          <Link href="/shop">
            <span className="i-ri-home-4-line" />
          </Link>
        </div>
      </SidebarHeader>
      <SidebarContent className="bg-background">
        <SidebarMenu>
          {items.map((item) => (
            <SidebarMenuItem key={item.title}>
              <SidebarMenuButton asChild>
                <Link
                  href={`/shop/${item.url}`}
                  className=" py-5 flex justify-center"
                >
                  <span>{item.title}</span>
                </Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          ))}
        </SidebarMenu>
      </SidebarContent>
      <SidebarFooter className="border-t bg-background">
        <SidebarMenu>
          <SidebarMenuItem>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuButton className="px-3 py-1 h-18">
                  <div className="flex justify-between items-center w-full">
                    <div className="flex items-center gap-2">
                      <QueryImage
                        imageKey={session?.user.image}
                        defaultImage={Avatar}
                        wrapperClassName="rounded-lg w-12 h-12"
                        imgClassName="rounded-lg w-full h-full object-cover"
                      />
                      <div className="w-full">
                        <div>{session?.user?.name ?? 'Unknown'}</div>
                        <div className="text-xs text-muted-foreground">
                          {session?.user?.username ?? 'Unknown'}
                        </div>
                      </div>
                    </div>
                    <span className="i-ri-arrow-up-s-line text-lg" />
                  </div>
                </SidebarMenuButton>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                side="top"
                className="w-[--radix-popper-anchor-width]"
              >
                <SignOut
                  button={
                    <Button variant="ghost" className="w-full">
                      退出登录
                    </Button>
                  }
                />
                <UserInfo
                  button={
                    <Button variant="ghost" className="w-full">
                      用户信息
                    </Button>
                  }
                />
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}
